<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            height: 50px;
            background: linear-gradient(to right, rgb(84, 1, 60), rgb(208, 30, 208), purple);
            display: flex;
            justify-content: end;
            align-items: center;
            color: white;
            padding-right: 20px;
        }

        body {
            background: url(../img/bg6.png) no-repeat 0 0/cover;
        }

        .container {
            width: 600px;
            height: 450px;
            /* margin-top: 200px; */
            color: aqua;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid #e5e5e5;
            display: none;
            border-radius: 6px;
        }

        .container:hover {
            box-shadow: aqua 0px 0px 14px;
        }

        .container input {
            background-color: rgba(255, 255, 255, 0.8);

        }

        .title-p {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 550;
        }

        .register-box {
            margin-top: 50px;
        }

        .tips {
            margin-left: 10px;
        }

        .form-group {
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .control-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-control {
            display: block;
            width: 90%;
            height: 34px;
            /* padding: 6px 12px; */
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .modal-footer {
            display: flex;
            width: 100%;
            justify-content: center;
        }

        .btn {
            color: #fff;
            background-color: aqua;
            border-radius: 4px;
            border-color: transparent;
            margin-right: 30px;
            width: 150px;
            height: 30px;
            font-size: 20px;
        }

        .btn:hover {
            box-shadow: red 0px 0px 10px;
            color: red;
        }

        a {
            color: #fff;
        }

        h1 {
            color: white;
            margin-bottom: 20px;
        }

        .list {
            color: rgb(47, 255, 210) !important;
            font-size: 24px;
        }

        .list:hover {
            color: orangered !important;
            transition: all 0.3s;
            font-size: 30px;
            font-weight: bold;
        }

        .loginbox {
            display: none;
        }

        .exitbox {
            display: none;
        }

        .userInfo,
        .update,
        .nickname,
        .exit {
            /* background-color: aqua; */
            cursor: pointer;
            color: rgb(47, 255, 210);
            margin-left: 20px;
        }

        .userInfo:hover,
        .update:hover,
        .nickname:hover,
        .exit:hover {
            font-size: 20px;
            font-weight: bold;
            transition: all 0.3s;
            color: red;
        }

        .nickname {
            cursor: auto;
        }

        .header-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        select {
            background-color: rgba(255, 255, 255, 0.8);
        }

        .close {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            float: right;
            font-size: 38px;
            border: none;
            cursor: pointer;
            text-align: center;
            line-height: 40px;

        }

        .close:hover {
            box-shadow: aqua 0px 0px 10px;
            color: aqua;
        }
    </style>
</head>

<body>
    <header>
        <div class="loginbox">
            <span class="login"><a href="./login.html">请登录</a></span>
        </div>
        <div class="exitbox">
            <span class="userInfo">修改个人信息</span>
            <a class="update" href="./editpassword.html">修改密码</a>
            <span class="nickname">用户名</span>
            <span class="exit">退出</span>
        </div>

    </header>
    <h1>海哥页面</h1>

    <a href="list.html" class="list">列表页</a>

    <div class="container">
        <div class="close">×</div>
        <form class="register-box">
            <p class="title-p">修改个人信息</p>
            <div class="form-group">
                <label for="recipient-name" class="control-label">年龄:</label>
                <input type="text" class="form-control" id="age" placeholder="请输入age">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">性别:</label>
                <!-- <input type="text" class="form-control" id="gender"> -->
                <select name="" id="gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">昵称:</label>
                <input type="text" class="form-control" id="nickname">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">头像:</label>
                <input type="file" name="header">
                <img src="" alt="" class="header-img">
            </div>
        </form>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">修改</button>
        </div>
    </div>



    <script src="../js/tool.js"></script>
    <script>
        class Home {
            constructor() {
                this.loginbox = document.querySelector('.loginbox')
                this.exitbox = document.querySelector('.exitbox')
                this.container = document.querySelector('.container')
                this.age = document.querySelector('#age')
                this.gender = document.querySelector('#gender')
                this.nickname = document.querySelector('#nickname')
                this.btn = document.querySelector('.btn')
                this.exit = document.querySelector('.exitbox>.exit')
                this.header = document.querySelector('.header-img')
                this.fileele = document.querySelector('input[type=file]')
                this.formele = document.querySelector('.register-box')
                this.close = document.querySelector('.close')
                this.headerImg = ''
                this.init()
            }
            init() {
                this.initVlaue()
                this.handleShow()
                this.handleEdit()
                this.handleExit()
                this.handleChange()
                this.handleClose()
            }
            handleClose() {
                this.close.onclick = () => {
                    this.container.style.display = 'none'
                }
            }

            handleChange() {
                this.fileele.onchange = async () => {
                    // console.log(123)

                    let fm = new FormData(this.formele)

                    let res = await axios.upload({ url: '/common/upload', query: fm })
                    console.log(res)
                    if (res.code == 1) {
                        this.header.src = 'http://localhost:8888/' + res.path
                        this.headerImg = '/' + res.path
                    }

                }
            }
            async initVlaue() {
                // 判断token 有没有 
                if (cookie.getItem('token')) {
                    this.loginbox.style.display = 'none'
                    this.exitbox.style.display = 'block'
                    let params = {
                        url: '/users/info',
                        query: {
                            id: cookie.getItem('userId')
                        }
                    }

                    let res = await axios.get(params)
                    if (res.code == 1) {
                        this.exitbox.children[2].innerHTML = res.info.nickname
                    }

                } else {
                    this.loginbox.style.display = 'block'
                    this.exitbox.style.display = 'none'
                }

            }
            // 显示修改个人信息弹窗 
            handleShow() {
                this.exitbox.children[0].onclick = async () => {
                    // 回显数据  
                    let params = {
                        url: '/users/info',
                        query: {
                            id: cookie.getItem('userId')
                        }
                    }

                    let res = await axios.get(params)
                    console.log('>>>>>>>>>>', res)

                    if (res.code == 1) {
                        this.age.value = res.info.age
                        this.gender.value = res.info.gender
                        this.nickname.value = res.info.nickname
                        // 显示页面
                        this.container.style.display = 'block'

                    }

                }
            }
            // 修改个人信息  
            handleEdit() {
                this.btn.onclick = async () => {
                    // 验证数据格式 

                    // 准备请求的参数  
                    let params = {
                        url: '/users/update',
                        query: {
                            id: cookie.getItem('userId'),
                            age: this.age.value,
                            gender: this.gender.value,
                            nickname: this.nickname.value,
                            headerImg: this.fileele.value
                        }
                    }
                    let res = await axios.post(params)
                    console.log(res)
                    if (res.code == 1) {
                        alert(res.message)
                        this.initVlaue()
                        this.container.style.display = 'none'
                    }
                }
            }

            // 注销登录  
            handleExit() {
                this.exit.onclick = async () => {
                    let params = {
                        url: '/users/logout',
                        query: {
                            id: cookie.getItem('userId')
                        }
                    }
                    let res = await axios.get(params)
                    console.log(res);
                    if (res.code == 1) {
                        cookie.clear()
                        alert('以注销登录！')
                        // location.href = './login.html';
                        this.exitbox.style.display = 'none'
                        this.loginbox.style.display = 'block'
                    } else {
                        alert(res.message)
                    }
                }
            }
        }

        new Home()

    </script>
</body>

</html>